<template>
	<div class="mainbox1">
		<el-tabs type="border-card" class="mt" @tab-click="handleClick">
			<el-tab-pane label="基本信息">
				<div class="section">
					<div class="title">设名</div>
					<div class="data">WFRM ZY2B6520X HJ</div>
				</div>
				<div class="section">
					<div class="title">P地址</div>
					<div class="data">10 0.2.254</div>
				</div>
				<div class="section">
					<div class="title">检测时间</div>
					<div class="data">2023-08-15 08 5627</div>
				</div>
				<div class="section">
					<div class="title">交品品牌</div>
					<div class="data">h3c</div>
				</div>
				<div class="section">
					<div class="title">产品型号</div>
					<div class="data">S6520X-30QC-E1</div>
				</div>
				<div class="section">
					<div class="title">描述信息</div>
					<div>
						<div class="data">H3C Comware Platform Software Sofbware Version 7 1 070, Release
							6533 H30S6520X-30Q0-E1</div>
						<div class="data">copyright 1c) 2004-2022 New H3C Technologles Co , Ltd All rghts reserved</div>
					</div>
				</div>
				<div class="section">
					<div class="title">已启动时问</div>
					<div class="data">39天15小时41分钟2秒</div>
				</div>

				<div class="section">
					<div class="title">联系方式</div>
					<div class="data">New HsC Technologies Co Ltd</div>
				</div>
				<div class="section">
					<div class="title">所在位置</div>
					<div class="data"> Hangzhou,china</div>
				</div>
				<div class="section">
					<div class="title">总端口数</div>
					<div class="data">65</div>
				</div>
				<div class="section">
					<div class="title">物理端口数</div>
					<div class="data">55</div>
				</div>
				<div class="section">
					<div class="title">Wlan数</div>
					<div class="data">33</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="端口信息">

			</el-tab-pane>
			<el-tab-pane label="VLAN">

			</el-tab-pane>
			<el-tab-pane label="IP地址表">
				<el-form label-position="left" label-width="100px" :model="infoadd2">

					<el-form-item label="基座版本">
						<el-input placeholder="请输入基座版本" v-model="infoadd2.apk.version"></el-input>
					</el-form-item>
					<el-form-item label="热更新版本">
						<el-input placeholder="请输入热更新版本" v-model="infoadd2.wgt.version"></el-input>
					</el-form-item>
					<el-form-item label="更新内容">
						<el-input type="textarea" rows="4" placeholder="请输入更新内容" v-model="infoadd2.apk.information"
							style="width: 550px;"></el-input>
					</el-form-item>
					<!-- 	<el-form-item label="更新类型">
						<el-select v-model="infoadd2.type" placeholder="请选择更新类型" style="width: 550px;"
							@change="changtype">
							<el-option label="全量更新" :value="1"></el-option>
							<el-option label="强制更新（APP出现更新进度提示）" :value="2"></el-option>
						</el-select>
						</el-input>
					</el-form-item> -->
					<el-form-item label="apk包链接">
						<div style="display: flex;">
							<el-input placeholder="请输入apk包链接" v-model="infoadd2.apk.apk"
								style="width: 420px;margin-right: 30px;">
							</el-input>
							<el-upload class="upload-demo" :action="$url + 'renew/uploadapk'"
								:headers="{ Authorization: token }" :show-file-list="false" :before-upload="beforeUpload"
								:on-success="uploadsuc">
								<el-button type="primary">上传</el-button>
							</el-upload>

						</div>
					</el-form-item>
					<el-form-item label="ios商店地址">

						<el-input placeholder="请输入ios商店地址" v-model="infoadd2.apk.ios">
						</el-input>
					</el-form-item>
					<el-form-item label="wgt包链接">
						<div style="display: flex;">
							<el-input placeholder="请输入wgt包链接" v-model="infoadd2.wgt.wgt"
								style="width: 420px;margin-right: 30px;">
							</el-input>

							<el-upload class="upload-demo" :action="$url + 'renew/uploadwgt'"
								:headers="{ Authorization: token }" :show-file-list="false" :before-upload="beforeUpload"
								:on-success="uploadsuc">
								<el-button type="primary">上传</el-button>
							</el-upload>
						</div>
					</el-form-item>

					<el-form-item>

						<el-button type="primary" @click="subadd2">提交</el-button>

					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="转发表">
				<el-form label-position="top" label-width="80px" :model="info3">
					<el-form-item label="ip地址">
						<el-input placeholder="请输入ip地址" v-model="info3.ip" :readonly="$permissions.indexOf(81) == -1">
						</el-input>
					</el-form-item>
					<el-form-item label="子网掩码">
						<el-input placeholder="请输入子网掩码" v-model="info3.netmask"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="网关地址">
						<el-input placeholder="请输入网关地址" v-model="info3.gateway"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="subinfo3">提交</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="路由表" v-if="wxshow">
				<el-form label-position="top" label-width="80px" :model="info5">
					<el-form-item label="agentId">
						<el-input placeholder="请输入agentId" v-model="info5.agentId"
							:readonly="$permissions.indexOf(81) == -1">
						</el-input>
					</el-form-item>
					<el-form-item label="corpId">
						<el-input placeholder="请输入corpId" v-model="info5.corpId"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="secret">
						<el-input placeholder="请输入secret" v-model="info5.secret"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="网页地址">
						<el-input placeholder="例如: http://43.137.15.216:81" v-model="info5.webUrl"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="subinfo5">提交</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="ARP表">
				<el-form label-position="top" label-width="80px" :model="info4">
					<el-form-item label="agentId">
						<el-input placeholder="请输入agentId" v-model="info4.agentId"
							:readonly="$permissions.indexOf(81) == -1">
						</el-input>
					</el-form-item>
					<el-form-item label="app-key">
						<el-input placeholder="请输入app-key" v-model="info4.key"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="app-secret">
						<el-input placeholder="请输入app-secret" v-model="info4.secret"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="corpId">
						<el-input placeholder="请输入corpId" v-model="info4.corpId"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="网页地址">
						<el-input placeholder="例如: http://43.137.15.216:81" v-model="info4.webUrl"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="subinfo4">提交</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="流量造秀">
				<el-form label-position="top" label-width="80px" :model="info4">
					<el-form-item label="agentId">
						<el-input placeholder="请输入agentId" v-model="info4.agentId"
							:readonly="$permissions.indexOf(81) == -1">
						</el-input>
					</el-form-item>
					<el-form-item label="app-key">
						<el-input placeholder="请输入app-key" v-model="info4.key"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="app-secret">
						<el-input placeholder="请输入app-secret" v-model="info4.secret"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="corpId">
						<el-input placeholder="请输入corpId" v-model="info4.corpId"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item label="网页地址">
						<el-input placeholder="例如: http://43.137.15.216:81" v-model="info4.webUrl"
							:readonly="$permissions.indexOf(81) == -1"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="subinfo4">提交</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<div class="bottombox">
			<el-card>
				<div class="mainbox">
					<div class="title">
						<div class="bigtitle">
							<img src="@/assets/cbot/bigtitle.jpg" alt="" width="100%">
						</div>
						<div class="name">S6520X-30QC-EI</div>
					</div>
					<div class="eth">
						<div v-for="i in 12" class='sec'>
							<div class="font" v-if="i <= 6">{{ nolist[i - 1] }}</div>
							<div class="img">
								<img src="@/assets/cbot/active1.png" alt="" width="100%">

							</div>
							<div class="font" v-if="i > 6">{{ nolist[i - 1] }}</div>
						</div>
					</div>
					<div class="eth">
						<div v-for="i in 12" class='sec'>
							<div class="font" v-if="i <= 6">{{ nolist[i - 1] }}</div>
							<div class="img">
								<img src="@/assets/cbot/active1.png" alt="" width="100%">

							</div>
							<div class="font" v-if="i > 6">{{ nolist[i - 1] }}</div>
						</div>
					</div>
					<div class="eth">
						<div v-for="i in 12" class='sec'>
							<div class="font" v-if="i <= 6">{{ i }}</div>
							<div class="img">
								<img src="@/assets/cbot/active1.png" alt="" width="100%">

							</div>
							<div class="font" v-if="i > 6">{{ i }}</div>
						</div>
					</div>
				</div>
			</el-card>
		</div>
		<div class="bottombox1">
			<el-card>
				<div class="iflink">
					<div class="iflink">
						<div class="img img1">
							<img src="@/assets/cbot/core.png" alt="" width="85%">
						</div>
						<div>连接：34</div>
					</div>
					<div class="iflink">
						<div class="img">
							<img src="@/assets/cbot/noactive.png" alt="" width="100%">
						</div>
						<div>空闲：34</div>
					</div>
					<div class="iflink">
						<div class="img">
							<img src="@/assets/cbot/active1.png" alt="" width="100%">
						</div>
						<div>多连接：34</div>
					</div>
				</div>

			</el-card>
		</div>
	</div>
</template>

<script>
export default {
	name: "",
	data() {
		return {
			nolist: [
				'1', '3', '5', '7', '9', '11',
				'2', '4', '6', '8', '10', '12',
			],
			infoadd2: {
				apk: {
					version: "",
					apk: ''
				},
				version: "",
				type: "",
				Information: "",
				ios: "",
				wgt: {
					version: "",
					wgt: ''
				},
			},
			infoadd: {
				ip: '',
				user: '',
				pwd: '',
				port: '',
			},
			wxshow: false,
			info2: {
				synchroIp: '',
				synchroPort: '',
				synchroDatePort: '',
			},
			addper: '',
			uploadCover: '',
			forbidPutTransfer: '',
			info3: {
				netmask: '',
				gateway: '',
				ip: '',
			},
			info: {
				synchroIp: '',
				synchroPort: '',
				synchroDatePort: '',
			},
			info4: {
				agentId: '',
				key: '',
				secret: '',
				corpId: '',
				webUrl: '',
			},
			info5: {
				agentId: '',
				secret: '',
				corpId: '',
				webUrl: '',
			},
			token: sessionStorage.getItem('token'),
			add2list: [],
			onoff: "",
			loading: "",
		};
	},
	components: {},

	created() { },

	mounted() {

	},

	methods: {


	}
}
</script>

<style scoped lang='less'>
.name {
	font-size: 15px;
	color: #3f86f1;
}

.mainbox1 {
	background: #f5f5f5;
	padding: 20px;
	height: 100vh;

	.section {
		display: flex;
		margin: 8px 0;
		color: rgb(59, 57, 57);

		.title {
			width: 100px;
			text-align: right;
			margin-right: 20px;
		}

		.data {
			width: 500px;
		}

	}
}

.bottombox {
	width: 100%;
	margin-top: 20px;

	.el-card {
		height: 180px;
		display: flex;
		padding: 20px;
		align-items: center;
	}

	.mainbox {
		display: flex;
		width: 100%;
		height: 140px;

		// border: 1px solid red;
		.title {
			width: 124px;

			.bigtitle {
				color: #ee1e24;
				height: 35px;
				font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
			}
		}

	}

	.eth {
		margin-left: 40px;
		height: 140px;
		background-color: #f2f7fb;
		border-radius: 5px;
		display: flex;
		width: 410px;
		flex-wrap: wrap;

		.sec {
			margin-left: 20px;
			width: calc(16.6% - 34.5px);
			width: 45px;
			height: 46px;

			img {
				width: 45px;
				height: 46px;
			}

			.font {
				text-align: center;
				font-size: 12px;
				height: 20px;
				line-height: 20px;
			}
		}
	}
}

.bottombox1 {
	width: 100%;
	margin-top: 10px;

	.el-card {
		display: flex;
		height: 80px;

		.iflink {
			display: flex;
			align-items: center;

			.img {
				width: 40px;
				height: 40px;
				margin-right: 5px;
			}

			.img1 {
				background: #33b06b;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			color: rgb(59, 57, 57);
			margin-right:20px;
		}

	}
}

/deep/.aa .el-form-item__label {
	width: 130px !important;
}

.iconfont {
	margin-left: 10px;
}

.el-input {
	width: 550px;
}

.mt {
	width: 100%;
	height: 600px;
}</style>
